$md-breakpoint: map-get($grid-breakpoints, md);

.vf-contains-link {
  a {
    color: var(--vf-link-color);
    text-decoration: var(--vf-link-decoration);
  }
}

.vf-static-tag {
  font-size: var(--vf-font-size);
  line-height: var(--vf-line-height);
  letter-spacing: var(--vf-letter-spacing);

  &.vf-static-tag-sm {
    font-size: var(--vf-font-size-sm);
    line-height: var(--vf-line-height-sm);
    letter-spacing: var(--vf-letter-spacing-sm);
  }

  &.vf-static-tag-lg {
    font-size: var(--vf-font-size-lg);
    line-height: var(--vf-line-height-lg);
    letter-spacing: var(--vf-letter-spacing-lg);
  }
}

.vf-static-tag-left {
  text-align: left;
}

.vf-static-tag-center {
  text-align: center;
}

.vf-static-tag-right {
  text-align: right;
}

.vf-static-tag-blockquote {
  blockquote {
    font-size: var(--vf-font-size-blockquote);
    line-height: var(--vf-line-height-blockquote);
    letter-spacing: var(--vf-letter-spacing-blockquote);
    padding: var(--vf-py-blockquote) 0px var(--vf-py-blockquote) var(--vf-px-blockquote);
    border-left: var(--vf-border-width-blockquote) var(--vf-border-color-blockquote) solid;
    margin: 0;
  }

  &.vf-static-tag-sm blockquote {
    font-size: var(--vf-font-size-blockquote-sm);
    line-height: var(--vf-line-height-blockquote-sm);
    letter-spacing: var(--vf-letter-spacing-blockquote-sm);
    padding: var(--vf-py-blockquote-sm) 0px var(--vf-py-blockquote-sm) var(--vf-px-blockquote-sm);
  }

  &.vf-static-tag-lg blockquote {
    font-size: var(--vf-font-size-blockquote-lg);
    line-height: var(--vf-line-height-blockquote-lg);
    letter-spacing: var(--vf-letter-spacing-blockquote-lg);
    padding: var(--vf-py-blockquote-lg) 0px var(--vf-py-blockquote-lg) var(--vf-px-blockquote-lg);
  }
}

.vf-static-tag-a {
  a {
    color: var(--vf-link-color);
    text-decoration: var(--vf-link-decoration);
  }
}

.vf-static-tag-hr {
  padding: var(--vf-py-hr) 0;

  hr {
    border-color: var(--vf-border-color-hr);
  }
}

.vf-static-tag-img {
  img {
    display: inline-block;
  }
}

.vf-static-tag-top-1 {
  margin-top: var(--vf-space-static-tag-1);
}

.vf-static-tag-top-2 {
  margin-top: var(--vf-space-static-tag-2);
}

.vf-static-tag-top-3 {
  margin-top: var(--vf-space-static-tag-3);
}

.vf-static-tag-bottom-1 {
  margin-bottom: var(--vf-space-static-tag-1);
}

.vf-static-tag-bottom-2 {
  margin-bottom: var(--vf-space-static-tag-2);
}

.vf-static-tag-bottom-3 {
  margin-bottom: var(--vf-space-static-tag-3);
}

.vf-static-tag-h1 {
  h1 {
    font-weight: bold;
    line-height: var(--vf-line-height-headings);
    letter-spacing: var(--vf-letter-spacing-headings);
    margin: 0;
  }

  &.vf-static-tag-sm h1 {
    line-height: var(--vf-line-height-headings-sm);
    letter-spacing: var(--vf-letter-spacing-headings-sm);
    margin: 0;
  }

  &.vf-static-tag-lg h1 {
    line-height: var(--vf-line-height-headings-lg);
    letter-spacing: var(--vf-letter-spacing-headings-lg);
    margin: 0;
  }
}

.vf-static-tag-h2 {
  h2 {
    font-weight: bold;
    line-height: var(--vf-line-height-headings);
    letter-spacing: var(--vf-letter-spacing-headings);
    margin: 0;
  }

  &.vf-static-tag-sm h2 {
    line-height: var(--vf-line-height-headings-sm);
    letter-spacing: var(--vf-letter-spacing-headings-sm);
    margin: 0;
  }

  &.vf-static-tag-lg h2 {
    line-height: var(--vf-line-height-headings-lg);
    letter-spacing: var(--vf-letter-spacing-headings-lg);
    margin: 0;
  }
}

.vf-static-tag-h3 {
  h3 {
    font-weight: bold;
    line-height: var(--vf-line-height-headings);
    letter-spacing: var(--vf-letter-spacing-headings);
    margin: 0;
  }

  &.vf-static-tag-sm h3 {
    line-height: var(--vf-line-height-headings-sm);
    letter-spacing: var(--vf-letter-spacing-headings-sm);
    margin: 0;
  }

  &.vf-static-tag-lg h3 {
    line-height: var(--vf-line-height-headings-lg);
    letter-spacing: var(--vf-letter-spacing-headings-lg);
    margin: 0;
  }
}

.vf-static-tag-h4 {
  h4 {
    font-weight: bold;
    line-height: var(--vf-line-height-headings);
    letter-spacing: var(--vf-letter-spacing-headings);
    margin: 0;
  }

  &.vf-static-tag-sm h4 {
    line-height: var(--vf-line-height-headings-sm);
    letter-spacing: var(--vf-letter-spacing-headings-sm);
    margin: 0;
  }

  &.vf-static-tag-lg h4 {
    line-height: var(--vf-line-height-headings-lg);
    letter-spacing: var(--vf-letter-spacing-headings-lg);
    margin: 0;
  }
}

.vf-static-tag-h1 {
  h1 {
    font-size: var(--vf-font-size-h1-mobile);
  }

  &.vf-static-tag-sm h1 {
    font-size: var(--vf-font-size-h1-mobile-sm);
  }

  &.vf-static-tag-lg h1 {
    font-size: var(--vf-font-size-h1-mobile-lg);
  }
}

.vf-static-tag-h2 {
  h2 {
    font-size: var(--vf-font-size-h2-mobile);
  }

  &.vf-static-tag-sm h2 {
    font-size: var(--vf-font-size-h2-mobile-sm);
  }

  &.vf-static-tag-lg h2 {
    font-size: var(--vf-font-size-h2-mobile-lg);
  }
}

.vf-static-tag-h3 {
  h3 {
    font-size: var(--vf-font-size-h3-mobile);
  }

  &.vf-static-tag-sm h3 {
    font-size: var(--vf-font-size-h3-mobile-sm);
  }

  &.vf-static-tag-lg h3 {
    font-size: var(--vf-font-size-h3-mobile-lg);
  }
}

.vf-static-tag-h4 {
  h4 {
    font-size: var(--vf-font-size-h4-mobile);
  }

  &.vf-static-tag-sm h4 {
    font-size: var(--vf-font-size-h4-mobile-sm);
  }

  &.vf-static-tag-lg h4 {
    font-size: var(--vf-font-size-h4-mobile-lg);
  }
}

@media (min-width: $md-breakpoint) {
  .vf-static-tag-h1 {
    h1 {
      font-size: var(--vf-font-size-h1);
    }

    &.vf-static-tag-sm h1 {
      font-size: var(--vf-font-size-h1-sm);
    }

    &.vf-static-tag-lg h1 {
      font-size: var(--vf-font-size-h1-lg);
    }
  }

  .vf-static-tag-h2 {
    h2 {
      font-size: var(--vf-font-size-h2);
    }

    &.vf-static-tag-sm h2 {
      font-size: var(--vf-font-size-h2-sm);
    }

    &.vf-static-tag-lg h2 {
      font-size: var(--vf-font-size-h2-lg);
    }
  }

  .vf-static-tag-h3 {
    h3 {
      font-size: var(--vf-font-size-h3);
    }

    &.vf-static-tag-sm h3 {
      font-size: var(--vf-font-size-h3-sm);
    }

    &.vf-static-tag-lg h3 {
      font-size: var(--vf-font-size-h3-lg);
    }
  }

  .vf-static-tag-h4 {
    h4 {
      font-size: var(--vf-font-size-h4);
    }

    &.vf-static-tag-sm h4 {
      font-size: var(--vf-font-size-h4-sm);
    }

    &.vf-static-tag-lg h4 {
      font-size: var(--vf-font-size-h4-lg);
    }
  }
}